<template>
  <div class="home app_content">
    <!-- 导航栏 -->
    <div class="header_body">
      <header-nav :leftArrow="false" titelText="锻炼"></header-nav>
    </div>
		<carousel-card
			v-if="carouselList.length"
			v-model:carouselList="carouselList"
		></carousel-card>
    <div class="circles">
      <div class="circle" v-for="item in info.typeList" @click="toVideoType(item)">
        <img :src="item.img">
        <div>{{ item.text }}</div>
      </div>
    </div>
    <div class="top-3">
      <div style="font-size: 16px;font-weight: bold;">高效燃脂计划</div>
      <div class="each" v-for="plan in info.plans" @click="playVideo(plan)">
        <div>{{plan.title}}</div>
        <img :src="plan.cover" />
      </div>
    </div>
    <van-dialog v-model:show="info.show" :title="info.cur.title" show-cancel-button>
      <video 
        style="width: 100%;height: 300px;"
        ref="videoPlayer"
        :src="info.cur.src" 
        controls 
      >
        您的浏览器不支持 video 标签。
      </video>
    </van-dialog>
    <!-- 底部 -->
    <div class="footer_body">
      <footer-nav></footer-nav>
    </div>
  </div>
</template>

<script setup name="Video">
import { getVideo } from "@/api/http.js";
const router = useRouter();
import swiperImage1 from '@/assets/swiperDL/swiper.png';
import swiperImage2 from '@/assets/swiperDL/swiper2.png';
import swiperImage3 from '@/assets/swiperDL/swiper3.png';

import image1 from '@/assets/video/全身.png';
import image2 from '@/assets/video/腰腹.png';
import image3 from '@/assets/video/手臂.png';
import image4 from '@/assets/video/肩背.png';
import image5 from '@/assets/video/腿部.png';
let carouselList = reactive([
  {
    image: swiperImage1,
    width: "100vw",
    height: "300px",
  },
  {
    image: swiperImage2,
    width: "100vw",
    height: "300px",
  },
  {
    image: swiperImage3,
    width: "100vw",
    height: "300px",
  }
]);

let info = reactive({
  typeList: [
    {
      text: '全身',
      img: image1
    }, 
    {
      text: '腰腹',
      img: image2
    }, 
    {
      text: '手臂',
      img: image3
    }, 
    {
      text: '肩背',
      img: image4
    }, 
    {
      text: '腿部',
      img: image5
    }],
    plans: [],
    show: false,
    cur: {}
})

const toVideoType = (data) => {
  router.push(`/videos/${data.text}`);
}


const playVideo = (plan) => {
  info.show = true
  info.cur = plan;
}
onMounted(() => {
  getVideo().then(res => {
    let total = res.data
    info.plans = total.splice(0, 3)
    console.log(info.plans.length)
  })
});
</script>

<style lang="less" scoped>
.home {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background-color: #f4f4f4;

}
.circles {
  padding: 20px 0;
  display: flex;
  justify-content: space-around;

  .circle {
    display: flex;
    flex-direction: column;
    img {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      margin-left: 5px;
    }
    div {
      width: 60px;
      text-align: center;
      margin-top: 12px;
      font-weight: bold;
      font-size: 14px;
    }
  }
}
.top-3 {
  padding: 12px;

  .each {
    width: calc(100% - 40px);
    height: 30px;
    margin: 10px 0;
    background: #fff;
    border-radius: 6px;
    display: flex;
    align-items: center;
    font-size: 14px;
    justify-content: space-between;
    padding: 20px;
     img {
      width: 50px;
      height: 50px;
     }
  }
}
</style>
